<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
            color: #999;
            cursor: pointer;
        }
        /* a:hover {
            color: #ff0000;
        } */
        
        ul li {
            list-style: none;
        }
        
        .short_nav {
            box-sizing: border-box;
            margin-top: 10px;
            height: 34px;
            width: 100%;
            display: flex;
            background: #e3e4e5;
            border-bottom: 1px solid #ccc;
        }
        
        .short_nav ul {
            margin-left: 300px;
            box-sizing: border-box;
            /* border: 1px solid red; */
            width: 780px;
            height: 34px;
            clear: both;
            font-size: 12px;
        }
        /* .short_nav ul * {
            border: 1px solid red;
        }
         */
        
        .short_nav ul li {
            float: left;
            box-sizing: border-box;
            width: 75px;
            height: 34px;
            line-height: 34px;
            text-align: center;
        }
        
        .short_nav ul li:nth-child(2n-1) {
            /* background: red; */
            width: 6px;
            color: #ccc;
        }
        /* .short_nav ul li:nth-child(8) {
            background: red;
        } */
        
        .short_nav ul li:nth-child(2),
        .short_nav ul li:nth-child(6),
        .short_nav ul li:nth-child(14) {
            width: 60px;
            /* background: red; */
        }
        
        .short_nav ul li a img {
            background: #ccc;
        }
        
        .short_nav ul li.active {
            color: #ff0000;
            border: 1px solid #ccc;
            background: white;
            border-bottom: 1px solid white;
        }
        
        .style_red {
            color: #ff0000;
            /* border: 1px solid #666; */
        }
        
        .show {
            display: none;
            clear: both;
            margin-left: 519px;
            width: 158px;
            height: 141px;
            /* border-top: 0; */
            border: 1px solid #ccc;
            border-top: 0;
            /* border-top: 0; */
        }
        
        .show ul {
            width: 158px;
            height: 141px;
            clear: both;
            box-sizing: border-box;
            /* border: 1px solid red; */
            font-size: 12px;
            color: #c5c5c5;
        }
        /* .show ul * {
            border: 1px solid red;
        } */
        
        .show ul li {
            /* margin-top: 13px; */
            float: left;
            width: 66px;
            height: 24px;
            line-height: 24px;
            text-align: center;
        }
        
        .show ul li:nth-child(1),
        .show ul li:nth-child(2) {
            margin-top: 3px;
        }
        
        .show ul li:nth-child(2),
        .show ul li:nth-child(4),
        .show ul li:nth-child(6) {
            width: 70px;
        }
        
        .show ul li:nth-child(7) {
            width: 54px;
            margin-left: 13px;
        }
        
        .show ul li:nth-child(8) {
            width: 58px;
        }
        
        .show ul li:nth-child(9) {
            width: 114px;
        }
        
        .show ul li:hover a {
            color: #ff0000;
        }
    </style>
</head>

<body>
    <div class="short_nav">
        <ul id="list1">
            <li>
                |
            </li>
            <li>
                <a href="#">我的订单</a>
            </li>
            <li>
                |
            </li>
            <li>
                <a href="#">我的京东 <img src="img/下.png" alt="下"></a>
            </li>
            <li>
                |
            </li>
            <li>
                <a href="#">京东会员</a>
            </li>
            <li>
                |
            </li>
            <li class="acti-ve">
                <a href="#" class="style_red">企业采购 <img src="img/下.png" alt="下"></a>
            </li>
            <li>
                |
            </li>
            <li>
                <a href="#">客户服务<img src="img/下.png" alt="下"></a>
            </li>
            <li>
                |
            </li>
            <li>
                <a href="#">网站导航 <img src="img/下.png" alt="下"></a>
            </li>
            <li>
                |
            </li>
            <li>
                <a href="#">手机京东</a>
            </li>

        </ul>

    </div>
    <div class="show">
        <ul id="list2">
            <li>
                <a href="#">企业购</a>
            </li>
            <li>
                <a href="#">商用场景馆</a>
            </li>
            <li>
                <a href="#">工业品</a>
            </li>
            <li>
                <a href="#">丰客多商城</a>
            </li>
            <li>
                <a href="#">礼品卡</a>
            </li>
            <li>
                <a href="#">微信企业购</a>
            </li>
            <li>
                <a href="#">工品优购</a>
            </li>
            <li>
                <a href="#">京东锦礼</a>
            </li>
            <li>
                <a href="#">大中型企业采购</a>
            </li>
        </ul>
    </div>

    <script>
        // 获取li元素
        let alist1 = $("ul")[0];
        let alis = alist1.getElementsByTagName("li");
        let alis8 = alis[7];
        let ashow = $(".show")[0];
        var timer;
        console.log(ashow);
        alis8.onmouseover = function() {


            ashow.style.display = "block";

            this.className = "active";

        }

        alis8.onmouseleave = function() {
            this.className = "";
            ashow.style.display = "none";
        }

        function $(select) {
            return document.querySelectorAll(select);
        }
    </script>
</body>

</html>